<template>
    <div class="forum-page">
      <el-row :gutter="20">
        <el-col :span="18">
          <el-card>
            <h3 slot="header">发帖区</h3>
            <el-input v-model="newPost.title" placeholder="请输入帖子标题"></el-input>
            <el-input type="textarea" v-model="newPost.content" placeholder="请输入帖子内容"></el-input>
            <el-button type="primary" @click="publishPost">发布帖子</el-button>
          </el-card>
  
          <el-divider></el-divider>
  
          <el-card v-for="post in posts" :key="post.id">
            <h3 slot="header">{{ post.title }}</h3>
            <p>{{ post.content }}</p>
            <el-button type="text" @click="toggleLike(post.id)">{{ post.liked ? '取消点赞' : '点赞' }}（{{ post.likes }}）</el-button>
            <el-divider></el-divider>
            <el-card v-for="reply in post.replies" :key="reply.id">
              <p>{{ reply.content }}</p>
            </el-card>
            <el-input v-model="newReply[post.id]" placeholder="请输入回复内容"></el-input>
            <el-button type="text" @click="replyToPost(post.id)">回复</el-button>
          </el-card>
        </el-col>
  
        <el-col :span="6">
          <el-card>
            <h3 slot="header">用户信息</h3>
            <p>用户名：{{ currentUser.name }}</p>
            <p>积分：{{ currentUser.points }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import { ref, reactive } from 'vue';
  
  export default {
    setup() {
      const newPost = reactive({
        title: '',
        content: '',
      });
  
      const newReply = reactive({});
  
      const posts = ref([
        {
          id: 1,
          title: '2025年6月7日',
          content: '高考加油',
          liked: false,
          likes: 10,
          replies: [
            { id: 1, content: '点赞' },
            { id: 2, content: '投币' },
          ],
        },
      ]);
  
      const currentUser = reactive({
        name: 'User1',
        points: 100,
      });
  
      const publishPost = () => {
        const newPostData = {
          id: posts.value.length + 1,
          title: newPost.title,
          content: newPost.content,
          liked: false,
          likes: 0,
          replies: [],
        };
        posts.value.push(newPostData);
        newPost.title = '';
        newPost.content = '';
      };
  
      const toggleLike = (postId) => {
        const post = posts.value.find((item) => item.id === postId);
        if (post) {
          post.liked = !post.liked;
          if (post.liked) {
            post.likes++;
          } else {
            post.likes--;
          }
        }
      };
  
      const replyToPost = (postId) => {
        const post = posts.value.find((item) => item.id === postId);
        if (post && newReply[postId]) {
          post.replies.push({ id: post.replies.length + 1, content: newReply[postId] });
          newReply[postId] = '';
        }
      };
  
      return {
        newPost,
        newReply,
        posts,
        currentUser,
        publishPost,
        toggleLike,
        replyToPost,
      };
    },
  };
  </script>
  
  <style>
  .forum-page {
    padding: 20px;
  }
  </style>
  